<template>
  <div id="hitchhike">
    <div class="hitch_home_header row between centered">
      <div>
        <div class="switch-button-active">乘客</div>
        <div class="switch-button" v-if="false">司机</div>
      </div>
      <div>
        <div class="my-btn" @click="gotoMyHitchhike">我的</div>
      </div>
    </div>
    <md-scroll-view class="scroll-view" ref="scrollView" :auto-reflow="true" :scrolling-x="false" :bouncing="false">
      <div class="field_box with_shadow">
        <md-field>
          <md-input-item
            :value="startInfo?startInfo.address.stationName:''"
            class="no-right-padding"
            ref="startLocation"
            :placeholder="'从哪出发'"
            readonly
            @click.native="selectStart"
          >
            <svg fill="#3F88EB" width="12" height="12" slot="left">
              <circle cx="6" cy="6" r="3" />
            </svg>
          </md-input-item>
          <md-input-item
            :value="endInfo?endInfo.address.stationName:''"
            class="no-right-padding"
            ref="endLocation"
            :placeholder="'您要去哪'"
            readonly
            @click.native="selectEnd"
          >
            <svg fill="#FF6917" width="12" height="12" slot="left">
              <circle cx="6" cy="6" r="3" />
            </svg>
          </md-input-item>
        </md-field>
      </div>
      <swiper class="favEndPlaceContainer" :options="swiperOption">
        <swiper-slide
          class="favEndPlaceItem"
          v-for="(item, index) in getHistoryEndPositions"
          :key="index"
        >{{ item.name }}</swiper-slide>
      </swiper>
      <div class="standbyOrderContainer" v-if="standbyOrders.length>0">
        <div class="title">待处理订单</div>
        <standby-order-item
          v-for="(item, index) in standbyOrders"
          :key="index"
          :value="item"
          @click.native="gotoLobby(item)"
        ></standby-order-item>
      </div>
      <div class="commonPlaceContainer">
        <div class="commonHeader">
          <div>常用路线</div>
          <div @click="gotoCommonPlaceManage">管理</div>
        </div>
        <div class="commonBody">
          <div class="unsetCommonPlace with_shadow" v-if="!commonPlaces">
            <div class="unsetCommonPlaceItem" @click="gotoCommonPlaceManage">
              <md-icon class="icon" name="sbyc_icon"></md-icon>
              <div>上班约车</div>
            </div>
            <div class="divider"></div>
            <div class="unsetCommonPlaceItem" @click="gotoCommonPlaceManage">
              <md-icon class="icon" name="xbyc_icon"></md-icon>
              <div>下班约车</div>
            </div>
          </div>
          <common-place-item v-if="gotoWorkInfo" :value="gotoWorkInfo" @click.native="gotoCommon('work')"></common-place-item>
          <common-place-item v-if="gotoHomeInfo" :value="gotoHomeInfo" @click.native="gotoCommon('home')"></common-place-item>
        </div>
      </div>
    </md-scroll-view>
  </div>
</template>
<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/tk_close.svg';
import '@/assets/svgs/sbyc_icon.svg';
import '@/assets/svgs/xbyc_icon.svg';
import {
  Field,
  FieldItem,
  Icon,
  InputItem,
  Button,
  Tag,
  ScrollView,
  ScrollViewRefresh,
  Dialog
} from 'mand-mobile';
import Utils from '@/common/pakjUtils';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('hitchhike');
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import StandbyOrderItem from './StandbyOrderItem';
import CommonPlaceItem from './CommonPlaceItem';
import Popup from './popup';
const moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'hitchhike',
  data() {
    return {
      startInfoString: '',
      endInfoString: '',
      startInfo: undefined,
      endInfo: undefined,
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 10,
        freeMode: true
      }
    };
  },
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [InputItem.name]: InputItem,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [CommonPlaceItem.name]: CommonPlaceItem,
    swiper,
    swiperSlide,
    StandbyOrderItem
  },
  async created() {
    /**
     * 1.获取用户信息
     * 2.获取待处理订单信息
     * 3.获取常用线路信息
     * 4.获取历史线路信息
     * 5.获取广告信息
     * 6.通过高德JSAPI列出所有城市
     * 7.获取当前用户定位
     */
    this.getHitchCitys(); // 通过高德地图获取全国城市列表
    this.$store.dispatch('getCurrentLocation'); // 获取当前用户定位
    this.setCostInfo(null);
    if (this.$store.getters.currentUser && this.$store.getters.currentUser.user_id) {
      const userId = this.$store.getters.currentUser.user_id;
      const token = this.$store.getters.currentUser.token;
      try {
        // 获取顺风车用户信息
        await this.getHitchUserInfo(userId);
        // 获取顺风车待处理订单
        await this.getStandbyOrders();
        console.log(this.standbyOrders);
        // 获取历史线路信息
        await this.getHistoryEndPositions();
        // 获取常用线路信息
        await this.getCommonPlaces(userId);
        console.log(this.commonPlaces);
      } catch (error) {
        Dialog.alert({
          title: '错误',
          content: error.message
        });
      }
    }
  },
  methods: {
    ...mapActions([
      'getHitchCitys',
      'getHitchUserInfo',
      'getStandbyOrders',
      'getHistoryEndPositions',
      'getCommonPlaces',
      'getOrderById'
    ]),
    ...mapMutations(['setCostInfo']),
    async selectStart() {
      try {
        this.startInfo = await Popup.selectStartPosition();
      } catch (error) {
        // do nothing
      }
      if (this.startInfo && this.endInfo) {
        this.$router.push({
          name: 'HitchOrderForm',
          params: {
            start: this.startInfo,
            end: this.endInfo
          }
        });
      }
    },
    async selectEnd() {
      try {
        this.endInfo = await Popup.selectEndPosition();
      } catch (error) {
        // do nothing
      }
      if (this.startInfo && this.endInfo) {
        this.$router.push({
          name: 'HitchOrderForm',
          params: {
            start: this.startInfo,
            end: this.endInfo
          }
        });
      }
    },
    gotoMyHitchhike() {
      this.$router.push({
        name: 'hitchhikeMyHome'
      });
    },
    gotoCommonPlaceManage() {
      this.$router.push({ name: 'hitchCommonRoute' });
    },
    async gotoLobby(item) {
      // await this.getOrderById(item.orderNo);
      if (item.payStatus === '未支付') {
        if (item.inviteStatus === '4') {
          this.$router.push({
            name: 'hitchColleagueOrder',
            query: {
              orderno: item.orderNo
            }
          });
        } else {
          this.$router.push({
            name: 'HitchWaitingLobby',
            query: {
              orderno: item.orderNo
            }
          });
        }
      } else {
        this.$router.push({
          name: 'hitchOrderDetail',
          query: {
            orderno: item.orderNo
          }
        });
      }
    },
    gotoCommon(type) {
      this.$router.push({
        name: 'HitchOrderForm',
        params: {
          type: type
        }
      });
    }
  },
  computed: {
    ...mapGetters([
      'hitchUserInfo',
      'commonPlaces',
      'gotoHomeInfo',
      'gotoWorkInfo',
      'standbyOrders',
      'historyPositions',
      'orderInfo'
    ])
  }
};
</script>
<style lang="stylus" scoped>
#hitchhike {
  padding: 0px 20px 20px 20px;
  height: calc(100vh - 210px);
  background-color: color-primary-background;

  .hitch_home_header {
    transform: translateX(-20px);
    width: 100vw;
    height: 88px;
    background: rgba(248, 248, 248, 1);
    box-shadow: 0px 2px 4px 0px rgba(220, 220, 220, 1);
    margin-bottom: 20px;
    padding: 40px;
    box-sizing: border-box;

    .switch-button {
      width: 120px;
      height: 48px;
      background: rgba(255, 255, 255, 1);
      color: #666666;
      text-align: center;
      line-height: 48px;
      font-size: 28px;
    }

    .switch-button-active {
      width: 120px;
      height: 48px;
      background: rgba(255, 255, 255, 1);
      border-radius: 24px;
      border: 1px solid rgba(221, 221, 221, 1);
      color: #FF6917;
      text-align: center;
      line-height: 48px;
      font-size: 28px;
    }

    .my-btn {
      font-size: 24px;
      color: rgba(153, 153, 153, 1);
      line-height: 24px;
    }
  }

  .scroll-view {
    background-color: transparent;
    height: calc(100vh - 210px - 88px)
  }

  .field_box {
    background-color: #fff;
    border-radius: 10px;
    padding: 5px;

    .no-right-padding {
      padding-right: 20px;
    }

    .field_item {
      height: 88px;
      font-size: 28px;
    }

    .place_icon {
      width: 20px;
      height: 20px;
    }

    .inline_field {
      padding: 0px;
    }

    .md-field-item {
      .md-field-item-inner {
        padding-top: 0px;
        padding-bottom: 0px;
      }
    }

    .md-input-item-right {
      width: 250px;
      justify-content: flex-end;
    }

    .submit-btn {
      margin: 20px;
      width: auto !important;
    }
  }

  .favEndPlaceContainer {
    margin-top: 20px;

    .favEndPlaceItem {
      padding: 0px 18px;
      height: 54px;
      background: #fff;
      border-radius: 27px;
      text-align: center;
      line-height: 54px;
      font-size: 24px;
      color: #666666;
      width: auto;
    }
  }

  .standbyOrderContainer {
    margin-top: 40px;

    .title {
      font-size: 28px;
      color: #666666;
      line-height: 28px;
      margin-bottom: 20px;
    }
  }

  .commonPlaceContainer {
    margin-top: 40px;

    .commonHeader {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: middle;
      color: #666666;
      font-size: 28px;
    }

    .commonBody {
      margin-top: 20px;

      .unsetCommonPlace {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 120px;
        background-color: #fff;
        border-radius: 6px;
        align-items: center;

        .unsetCommonPlaceItem {
          flex: 1;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          .icon {
            width: 36px;
            height: 36px;
            margin-right: 20px;
          }
        }

        .divider {
          width: 1px;
          height: 80px;
          border-left: 1px solid #E0E0E0;
        }
      }
    }
  }
}
</style>
